<template>
  <div class="signIn-container">
    <div class="main">
      <div
        class="item"
        v-for="(item, index) in dataArr"
        :key="index"
        @click="Jump(item.path, item.isOcclusion)"
      >
        <Box :colorArr="colorArr" :isOcclusion="item.isOcclusion">
          <template v-slot:Occlusion>
            <div class="prompt">
              <p class="prompt-time">{{ item.prompt.time }}</p>
              <p class="prompt-text">{{ item.prompt.text }}</p>
            </div>
          </template>
          <template v-slot:default>
            <div class="icon">
              <Icon :type="item.iconType"></Icon>
            </div>
            <p class="text">{{ item.text }}</p>
          </template>
        </Box>
      </div>
    </div>
    <div class="mask">
      <MongokuanLayer :isMongokuanLayer="isMongokuanLayerRef" @click="close">
        <Signin :SigninData="SigninItemRef[0]" @onCheckIn="onCheckIn" />
      </MongokuanLayer>
    </div>
  </div>
</template>

<script setup>
import moment from "moment";
import Icon from "@/components/Icon/index.vue";
import Box from "@/components/Box/index.vue";
import MongokuanLayer from "@/components/MongokuanLayer/index.vue";
import Signin from "./components/Signin.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { getUp, returns, clean,getIsSignIn } from "@/api/user.js";
const router = useRouter();
const colorArr = ["#7817e7", "#ba3ae2"];
// 打卡目录需要的数据
const dataArr = [
  {
    iconType: "rightarrow",
    text: "放回",
    path: -1,
    isOcclusion: false,
    prompt: null,
  },
  
  {
    iconType: "getUp",
    text: "起床打卡",
    path: 1,
    isOcclusion: moment(moment.utc().local().format("HH:mm:ss"),"HH:mm:ss").diff(moment("06:00:00","HH:mm:ss"),"seconds") < 0, // 6点后开启打卡,
    prompt: {
      time: "06:00:00",
      text: "开启签到",
    },
  },
  {
    iconType: "endResult",
    text: "归宿打卡",
    path: 2,
    isOcclusion:
      moment(moment.utc().local().format("HH:mm:ss"), "HH:mm:ss").diff(
        moment("17:00:00", "HH:mm:ss"),
        "seconds"
      ) < 0, // 17点后开启打卡
    prompt: {
      time: "17:00:00",
      text: "开启签到",
    },
  },
  {
    iconType: "clean",
    text: "打扫打卡",
    path: 3,
    isOcclusion:
      moment(moment.utc().local().format("HH:mm:ss"), "HH:mm:ss").diff(
        moment("00:00:00", "HH:mm:ss"),
        "seconds"
      ) < 0,
    prompt: {
      time: "00:00:00",
      text: "开启签到",
    },
  },
];
// 打卡组件需要所有的数据
const SigninData = [
  {
    id: 1,
    title: "起床打卡",
    text1: "清晨的阳光照亮了窗户，",
    text2: "是时候起床迎接新的一天了。",
  },
  {
    id: 2,
    title: "归宿打卡",
    text1: "归宿是永恒的牵挂，",
    text2: "是漂泊心灵的寄托。",
  },
  {
    id: 3,
    title: "打扫打卡",
    text1: "一尘不染，从心开始，",
    text2: "用心打扫，享受洁净的快乐。",
  },
];
const isMongokuanLayerRef = ref(false); // 是否打卡蒙层
const SigninItemRef = ref(null); // 打卡需要展示的数据
// 返回或打开蒙层
async function Jump(path, isOcclusion) {
  if (isOcclusion) {
    return;
  }
  if (path === -1) {
    router.go(-1);
    return;
  }
  const {data} = await getIsSignIn(path)
  console.log(data);
  isMongokuanLayerRef.value = true;
  SigninItemRef.value = SigninData.filter((item) => item.id === path).map(item => {
    return {
        ...item,
        isSignIn: data.isSignIn,
        funText: data.isSignIn ? "已打卡" : "打卡"
    }
  })
  console.log(SigninItemRef.value);
}
// 关闭蒙层
function close() {
  isMongokuanLayerRef.value = false;
}
// 点击打卡
async function onCheckIn(id) {
  switch (id) {
    case 1:
      const { data } = await getUp();
      console.log(data);
      if (data) {
        setState(
          data.isPass,
          "晚上不想睡，早上不起床，你的生活就像一部“灰姑娘”的现代版。",
          "清晨的空气最新鲜，早起的心情最愉快。"
        );
      }
      isMongokuanLayerRef.value = false;
      break;
    case 2:
      const res = await returns();
      console.log(res);
      if (res.data) {
        setState(
         res.data.isPass,
          "夜幕降临，城市繁华的背后，晚归的人带着孤独的心情",
          "人生的归宿，只有一个，那便是你！"
        );
      }
      isMongokuanLayerRef.value = false;
      break;
    case 3:
      const reselut = await clean();
      if (reselut.data) {
        ElMessage({
          message:
            "保持清洁，享受舒适。定期打扫卫生，让你的居所焕然一新，心情愉悦。",
          type: "success",
        });
      }
      isMongokuanLayerRef.value = false;
      break;
  }
}
// 根据不同的响应的状态
function setState(isPass, err, success) {
  if (isPass) {
    ElMessage({
      message: success,
      type: "success",
    });
  } else {
    ElMessage.error(err);
  }
}
</script>
<style lang="less" scoped>
@import "@/styles/var.less";
@import "@/styles/mixin.less";
.signIn-container {
  width: 100%;
  height: 100%;
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item {
     position: relative;
      .prompt {
        .self-center();
        text-align: center;
        .prompt-time{
          font-size: 25px;
          font-weight: bold;
          color: @danger;
        }
      }
    }
    .box-container {
      width: 150px;
      height: 200px;
    }
    .icon {
      width: 100px;
      height: 100px;
      line-height: 100px;
      border-radius: 50%;
      margin: 20px auto;
      text-shadow: 2px 2px 10px #3b3b3b;
      background: linear-gradient(0deg, @frameColor1, @frameColor2);
    }
    .text {
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.icon-container {
  color: #fff;
  font-size: 50px;
}
.signin-container {
  width: 80%;
}
</style>